<template>
  <div class="city-head">
    <div class="head-item"
         v-for="(item,index) in cityList"
         :key="item.id"
         @click="itemClick(index)"
         :class="{active: currentIndex === index}">
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

<script>

export default {
  name: "CityHead",
  data() {
    return {
      cityList: [
        {
          id: "01",
          title: "境内"
        },
        {
          id: "02",
          title: "境外·港澳台"
        }
      ],
      currentIndex: 0, //记录当前被选择的城市
    }
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index
      this.$emit('itemClick',index)
    }
  }
}
</script>

<style scoped>
.city-head {
    width: 100%;
    height: .88rem;
    background: var(--color-background);
    color: #fff;
    font-size: .28rem;
    text-align: center;
  }
  .head-item {
    display: inline-block;
    width: 2rem;
    border: 1px solid #fff;
    line-height: .5rem;
  }
  .active {
    background: #fff;
    color: var(--color-background);
  }
</style>
